<template>
  <div>
    <!-- 播放器 -->
    <div class="player" v-show="showplayer" :style="{'background-image':'url('+musiclist.coverImgUrl+')','background-size': '200%',}"  >
      <div class="button" @click="showplayerFun(false)">
        <span class="iconfont icon-arrow-down-bold"></span>
      </div>
      <div class="title">
        <h2>{{ musiclist.name }}</h2>
        <h3>
          <span
            v-for="(item, index) in musiclist.ar"
            :key="index"
            v-show="index < 3"
            >{{ item.name }}</span
          >
        </h3>
      </div>

      <div class="content clearfix" @click="togglelyric = !togglelyric">
        <div
          v-show="togglelyric == true"
          :class="['img', 'play', { pause: iconplay }]"
        >
          <img :src="musiclist.coverImgUrl" alt="" />
        </div>

        <div v-show="togglelyric != true" class="lyrics">
          <ul :style="{ top: lyricTop }">
            <li
              v-for="(item, index) in lyric"
              :class="{ con: currentRow === index }"
              :key="index"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
      </div>

      <div class="range">
        <div class="bar">
          <span class="timeLeft">{{ timeleft | playertime }}</span>
          <van-slider
            v-model="value"
            @change="sliderchange"
            bar-height="5px"
            active-color="#D4483D"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <span class="timeRight">{{ timeright | playertime }}</span>
        </div>
      </div>

      <div class="buttons">
        <div
          v-if="playerType == 1"
          class="iconfont icon-liebiaobofang1"
          @click="changeMode"
        ></div>
        <div v-else class="iconfont icon-user" @click.stop="changeMode"></div>
        <div class="iconfont icon-shangyiqu-wangyiicon" @click="startup"></div>
        <div class="iconbutton" @click.stop="toggleplay">
          <span v-if="iconplay" class="iconfont icon-bofang"></span>
          <span v-else class="iconfont icon-04"></span>
        </div>
        <div class="iconfont icon-shangyiqu" @click="lowerFun"></div>
        
          <div class="iconfont icon-shoucang" v-show="!scflag" @click="add" ></div>
          <div class="iconfont icon-aixin sc" v-show="scflag" @click="delsongs"></div>
        <!-- <button @click="getmusiclistdetail">12564</button> -->
      </div>
    </div>

    <!-- 迷你版播放器 -->
    <div class="mini-player" v-if="musiclist.coverImgUrl">
      <div class="img" @click="showplayerFun(true)">
        <img
          :class="['play', { pause: iconplay }]"
          :src="musiclist.coverImgUrl"
          alt=""
        />
      </div>
      <div class="text">
        <h2>{{ musiclist.name }}</h2>
        <h3>
          <span
            v-for="(item, index) in musiclist.ar"
            :key="index"
            v-show="index < 3"
            >{{ item.name }}</span
          >
        </h3>
      </div>
      <div class="control" @click.stop="toggleplay">
        <span v-if="iconplay" class="iconfont icon-bofang"></span>
        <span v-else class="iconfont icon-zantingtingzhi"></span>
      </div>
      <div class="songlist">
        <span class="iconfont icon-caidan" @click="songlistsFlag = true"></span>
      </div>
    </div>

    <div class="songlists" v-if="songlistsFlag">
      <dl class="musiclists">
        <dt>
          顺序播放 <span>({{musiclist.tracks.length}})</span>
          <span class="del iconfont icon-shanchu" @click="musiclist.tracks=''"></span>
        </dt>
        <dd v-for="(item,index) in musiclist.tracks" :key="index">
          <div class="info">
            <h2>{{item.name}}</h2>
          </div>
          <div class="delete">
            <span class="iconfont icon-cha" @click="del(index)"></span>
          </div>
        </dd>
        
      </dl>
      
      <div class="btn">
          <button @click="songlistsFlag=false">关闭</button>
      </div>
    </div>
    <audio
      ref="audio"
      controls
      hidden
      :src="musiclist.url"
      @canplay="canplayFun"
      @ended="endedFun"
    ></audio>
  </div>
</template>

<script>
import { getSongUrl, getSongLyric ,colletSongs ,delSongs} from "../../api/base";
import { getDetail } from "../../api/recommend";
export default {
  data() {
    return {
      iconplay: true,
      // musicData: {},
      showplayer: false,
      value: 0,
      timeleft: 0,
      timeright: 0,
      clearset: null,
      playerType: 1, //1 列表播放  2 随机播放
      lyric: [], //歌词对象
      currentRow: 0,
      lyricTop: "300px",
      togglelyric: true,
      songlistsFlag:false,
      scflag:false,
      idlist:[]
    };
  },
  watch: {
    musiclist: {
      handler: function () {
        getSongUrl({ id: this.musiclist.id }).then((data) => {
          this.iconplay = true;
          this.$set(this.musiclist, "url", data.data[0].url);
          // console.log(this.musiclist.id);
          // 计算事件
        getDetail({id:419698131}).then((data)=>{
         if(data.code==200){
           for(let i=0;i<data.playlist.tracks.length;i++){
             this.idlist.push(data.playlist.tracks[i].id)
           }
          //  console.log(this.idlist);
             if(this.idlist.indexOf(this.musiclist.id) != -1){
              this.scflag = true
              console.log(111);
            }else{
              console.log(222);
              this.scflag = false
            }
          
         }
       })
    
        });
        // 调用歌词
        this.getSongLyricFun();

        
      },
      deep: true,
    },
    timeleft: function () {
      for (let i = 0; i < this.lyric.length; i++) {
        if (parseInt(this.timeleft) == this.lyric[i].time) {
          this.currentRow = i; //文字选中切换
          this.lyricTop = 300 - i * 50 + "px";
          break;
        }
      }
    },
    userlikelist:{
        handler:function(){
          console.log(111);
        },
      }
  },
  methods: {
    toggleplay() {
      if (this.iconplay) {
        this.$refs.audio.play(); //播放
        clearInterval(this.clearset); //清除定时器
        // 设置定时器
        this.clearset = setInterval(() => {
          let currentTime = this.$refs.audio.currentTime;
          let duration = this.$refs.audio.duration;
          this.timeleft = currentTime;
          // 计算滑块位置
          this.value = (currentTime / duration) * 100;

          if (this.value == 100) {
            clearInterval(this.clearset);
            this.$refs.audio.pause(); //暂停
          }
        }, 999);
      } else {
        this.$refs.audio.pause(); //暂停
        clearInterval(this.clearset); //清除定时器
      }
      // 按钮切换
      this.iconplay = !this.iconplay;
    },
    showplayerFun(bol) {
      this.showplayer = bol;
    },
    // 进度条
    sliderchange() {
      let duration = (this.$refs.audio.duration * this.value) / 100;
      this.timeleft = duration; //百分比
      this.$refs.audio.currentTime = duration; //修改时间
    },
    // 上一曲
    startup() {
      if(this.musiclist.tracks.length != 0){
        let { id, tracks } = this.musiclist;
        console.log({id, tracks });
      
      // 返回数组下标
      let index = tracks.findIndex((item) => {
        return item.id == id;
      });
      index = index - 1 < 0 ? tracks.length - 1 : index - 1;
      this.$set(this.musiclist, "id", tracks[index].id);
      this.$set(this.musiclist, "name", tracks[index].name);
      this.$set(this.musiclist, "ar", tracks[index].ar);
      this.$set(this.musiclist, "coverImgUrl", tracks[index].al.picUrl);
      }else{
        this.$refs.audio.pause()
        this.iconplay = !this.iconplay
        return alert("播放列表为空")
      }
    },
    // 下一曲
    lowerFun() {
      if(this.musiclist.tracks.length != 0){
        let { id, tracks } = this.musiclist;
        console.log({id, tracks });
      // 返回数组下标
      let index = tracks.findIndex((item) => {
        return item.id == id;
      });
      index = index + 1 > tracks.length - 1 ? 0 : index + 1;
      this.$set(this.musiclist, "id", tracks[index].id);
      this.$set(this.musiclist, "name", tracks[index].name);
      this.$set(this.musiclist, "ar", tracks[index].ar);
      this.$set(this.musiclist, "coverImgUrl", tracks[index].al.picUrl);
      }else{
        this.$refs.audio.pause()
        this.iconplay = !this.iconplay
        return alert("播放列表为空")
      }
    },
    // 音乐加载完后调用
    canplayFun() {
      this.timeright = this.$refs.audio.duration;
      // this.timeleft = 0;
      this.iconplay = true; //播放
      this.toggleplay();
    },
    // 获取歌词
    getSongLyricFun() {
      this.lyricTop = "300px";
      this.currentRow = 0;
      let lyricdefault = "歌词[00:00:00] 还没有上传歌词"
      getSongLyric({ id: this.musiclist.id }).then((data) => {
        if(data.lrc !=undefined){
          this.formatLyric(data.lrc.lyric);
        }else{
          this.formatLyric(lyricdefault)
        }
        
      });
    },
    // 处理歌词结构
    formatLyric(text) {
      this.lyric = [];

      let arr = text.split("\n"); //把原歌曲字符串转数组
      let row = arr.length; //获取数组长度
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i]; //获取数据"[00:00.000] 作词 : G.E.M.邓紫棋"
        let temp_arr = temp_row.split("]"); //分成两个数组
        // [00:00.000      作词 : G.E.M.邓紫棋
        let text = temp_arr.pop(); //删除数组最后以为，返回删除数据

        temp_arr.forEach((element) => {
          let obj = {};
          let time_arr = element.substr(1, element.length - 1).split(":"); //02:00.000 获取时间数据
          let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //得到当前秒数
          obj.time = s;
          obj.text = text;
          if (text.length > 0) {
            this.lyric.push(obj); //每一行处理好数据放入数组
          }
        });
      }
    },
    // 音乐播放结束
    endedFun() {
      this.iconplay = true;
      this.$refs.audio.play(); //播放
      clearInterval(this.clearset); //清除定时器
      if (this.playerType == 1) {
        //列表播放
        this.lowerFun();
        this.iconplay = false;
      } else {
        //随机播放
        let num = parseInt(Math.random() * this.musiclist.tracks.length);

        let { tracks } = this.musiclist;
        this.$set(this.musiclist, "id", tracks[num].id);
        this.$set(this.musiclist, "name", tracks[num].name);
        this.$set(this.musiclist, "ar", tracks[num].ar);
      }
    },
    // 修改类型
    changeMode() {
      this.playerType = this.playerType == 1 ? 2 : 1;
    },
    del(index){
        this.musiclist.tracks.splice(index,1)
    },
    add(){
      // this.scflag=!this.scflag
      colletSongs({op:"add" , pid:419698131,tracks:this.musiclist.id}).then((data)=>{
       if(data.status==200){
        //  console.log(111);
        this.scflag=!this.scflag      
       }
        
      })
    },
    delsongs(){
      delSongs({op:"del" , pid:419698131,tracks:this.musiclist.id}).then((data)=>{
       if(data.status==200){
        //  console.log(111);
        this.scflag=!this.scflag      
       }
        
      })
    }
    
  },
  computed:{
    musicData(){
      return this.$store.state.musicData
    },
    musiclist(){
      return this.$store.state.musiclist
    },
    userlikelist(){
      return this.$store.state.userlikelist
    }
  },
  created() {

    // 获取数据
    // window.addEventListener("setItem", () => {
    //   this.musicData = this.resetSetItem.fetch();
    // });
  },
  filters: {
    playertime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      s = s < 10 ? "0" + s : s;
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + s;
      }
    },
  },
  beforeDestroy() {
    // 销毁清除定时器
    clearInterval(this.clearset); //清除定时器
  },
};
</script>

<style lang="less" scoped>
.player {
  overflow: hidden;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 640px;
  height: 100%;
  margin: auto;
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;

  
  background: #837f7d;
  z-index: 500;
  .button {
    position: absolute;
    top: 23px;
    left: 23px;
    font-size: 34px;
    width: 34px;
    height: 34px;
    span {
      display: block;
      font-size: 34px;
      height: 34px;
      line-height: 34px;
      color: #fff;
      font-weight: bold;
    }
  }
  .title {
    text-align: center;
    color: #fff;
    h2 {
      font-size: 32px;
      margin-top: 4px;
    }
    h3 {
      font-size: 28px;
    }
  }
  .content {
    height: 666px;
    text-align: center;
    .img {
      float: left;
      width: 100%;
      margin-top: 86px;
      img {
        display: block;
        width: 468px;
        height: 468px;
        border: 24px solid #878381;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 auto;
      }

      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
    .lyrics {
      width: 100%;
      height: 666px;
      position: relative;
      overflow: hidden;
      ul {
        position: absolute;
        width: 100%;
        min-height: 1000px;
        top: 300px;
        left: 0px;
        li {
          width: 100%;
          color: #4f4b49;
          text-align: center;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          &.con {
            color: #fff;
            font-size: 22px;
          }
        }
      }
    }
  }
  .range {
    text-align: center;
    height: 20px;
    .bar {
      width: 420px;
      margin: 0 auto;
      position: relative;
      font-size: 18px;
      color: #fff;
      .timeLeft {
        position: absolute;
        left: -44px;
        top: -7px;
      }
      .timeRight {
        position: absolute;
        right: -44px;
        top: -7px;
      }
    }
  }
  .buttons {
    display: flex;
    // margin-top: 33px;
    .iconfont {
      flex: 1;
      text-align: center;
      font-size: 34px;
      color: #fff;
      height: 66px;
      line-height: 66px;
    }
    .iconbutton {
      flex: 1;
      text-align: center;
      color: #fff;
      height: 66px;
      .iconfont {
        display: block;
        border: 5px solid #fff;
        font-size: 20px;
        height: 55px;
        width: 55px;
        line-height: 55px;
        margin: 0 auto;
        border-radius: 50%;
      }
      
    }
    .sc::before{
        color: red;
      }
  }
}

.mini-player {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 91px;
  width: 100%;
  background-color: rgba(44, 188, 238, 0.9);
  z-index: 50;
  display: flex;
  .img {
    flex: 0 0 109px;
    img {
      width: 63px;
      height: 63px;
      margin: 13px 0 0 30px;
      border-radius: 50%;
      &.play {
        animation: rotate 20s linear infinite;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
  }
  .text {
    flex: 1;
    h2 {
      margin-top: 20px;
      font-size: 22px;
      color: #3a3c3e;
    }
    h3 {
      font-size: 18px;
      color: #3a3c3e;
    }
  }
  .control {
    flex: 0 0 50px;
    margin: 20px 20px 0 0;
    span {
      display: block;
      font-size: 20px;
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border: 4px solid #646565;
      color: #646565;
      border-radius: 50%;
    }
  }
  .songlist {
    flex: 0 0 50px;
    margin: 25px 20px 0 0;
    span {
      display: block;
      font-size: 42px;
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #646565;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.custom-button {
  width: 5px;
  height: 5px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 50%;
  border: 8px solid #fff;
}

.songlists {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.6);
  .musiclists {
      max-height: 500px;
    border-radius: 12px;
    background-color: #fff;
    position: fixed;
    bottom: -500px;
    animation: translate 1s linear forwards;
    width: 100%;
    overflow: scroll;
    dt {
      height: 61px;
      line-height: 61px;
      border-bottom: 1px solid #e2e2e2;
      font-size: 25px;
      color: #131615;
      text-indent: 1em;
      .del {
        float: right;
        margin-right: 44px;
        font-size: 24px;
      }
    }
    dd {
      height: 58px;
    //   border-bottom: 1px solid #e2e2e2;
    
      display: flex;
      .info {
        flex: 1;
        // max-width: 450px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        h2 {
            text-indent: 1em;
          font-size: 25px;
          color: #3a3c3c;
          margin-top: 18px;
          font-weight: normal;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        
      }
      .delete{
            float: right;
            margin-right: 44px;
            margin-top: 20px;
            color: red;
            span{
                font-size: 24px;
            }
        }
    }
    
    
  }
  .btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 75px;
        line-height: 75px;
        text-align: center;
        background-color: #fff;
        
        button{
            background-color: #fff;
            border: none;
        }
    }
}

@keyframes translate {
  0% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(-500px);
  }
}
</style>